import {
  useReactive,
  useDOM
} from '../reactivity/index';

function App() {


  const state = useReactive({
    count: 0,
    name: 'zhangsan',
    info: {
      age: 20
    }
  });

  // console.log(state);

  const add = (num) => {
    // num = parseInt(num);
    state.count += num;
  }

  const minus = (num) => {
    state.count -= num;
  }

  const changeName = (name) => {
    state.name = name;
  }

  //返回视图
  return {
    template: `
    <h1>{{count}}</h1>
    <h2>{{name}}</h2>
    <button onClick="add(2)">+</button>
    <button onClick="minus(1)">-</button>
    <button onClick="changeName('lisi')">改变名称</button>
    `,
    state,
    methods: {
      add,
      minus,
      changeName
    }
  }
}

//使用
//App() -> template被编译后插入#app节点里
useDOM(
  App(),
  document.querySelector('#app')
)